<template>
  <xh-container btnText="保存" @onSave="handleClickSubmit" title="详情">
    <view class="container">
      <uni-forms :modelValue="formData" :label-width="80" label-align="right">
        <uni-forms-item label="产品名称" name="productName">
          <xh-data-select
            v-model="formData.productName"
            :localdata="productList"
            @change="handleProductChange"
          ></xh-data-select>
        </uni-forms-item>
        <uni-forms-item label="检验编码" name="insCode">
          <xh-data-select
            v-model="formData.insCode"
            :localdata="showInspectList"
            @change="onChangeInsCode"
          />
        </uni-forms-item>
        <uni-forms-item label="卷数" name="volumeNum">
          <uni-easyinput
            type="text"
            v-model="formData.volumeNum"
            placeholder="请输入卷数"
          />
        </uni-forms-item>
        <uni-forms-item label="米数" name="meters">
          <uni-easyinput
            type="text"
            v-model="formData.meters"
            placeholder="请输入数量"
          />
        </uni-forms-item>
      </uni-forms>
      <xh-desc-item label="创建人">{{ formData.createBy }}</xh-desc-item>
      <xh-desc-item label="创建时间">{{ formData.createTime }}</xh-desc-item>
      <xh-desc-item label="更新人">{{ formData.updateBy }}</xh-desc-item>
      <xh-desc-item label="更新时间">{{ formData.updateTime }}</xh-desc-item>
    </view>
  </xh-container>
</template>

<script>
import { editOutbound, getInspectList } from "@/api/purchase/fabric.js";
import { decodeParams } from "@/utils/common.js";
import mixins from "../mixins";

export default {
  mixins: [mixins],
  data() {
    return {
      formData: {},
      showInspectList: [],
    };
  },
  onLoad(options) {
    this.formData = decodeParams(options);
  },
  created() {},
  mounted() {
    if (this.formData.productName) {
      this.handleProductChange({}, this.formData.productName);
    }
  },
  methods: {
    // 选择检验编码时
    onChangeInsCode(item) {
      const {
        meters,
        volumeNum,
        insCode,
        fabricId,
        auditStatus,
        factory,
        boundType,
      } = item;
      this.detailData = {
        ...this.detailData,
        fabricId: fabricId,
        meters: meters,
        volumeNum: volumeNum,
        insCode,
        auditStatus,
        factory,
        boundType,
      };
    },
    handleProductChange(data, val) {
      const proItem = this.productList.find((item) => item.productName === val);
      if (proItem) {
        const { productName } = proItem;
        getInspectList(productName).then((res) => {
          const { rows } = res;
          this.showInspectList = this.formatSelectOptions(rows || []);
        });
        this.formData.productName = productName;
      } else {
        this.showInspectList = [];
        this.formData.insCode = "";
        this.formData.fabricId = null;
        this.formData.meters = "";
        this.formData.volumeNum = "";
      }
    },
    formatSelectOptions(arr) {
      return arr?.map((item) => ({
        ...item,
        text: item.insCode,
        value: item.insCode,
      }));
    },
    handleClickSubmit() {
      editOutbound(this.formData).then(() => {
        this.$modal.msgSuccess("编辑成功！");
        this.$nav.navigateBack();
      });
    },
  },
  watch: {
    formType(newVal) {
      // eslint-disable-next-line no-undef
      uni.setNavigationBarTitle({
        title: newVal === "add" ? "新增" : "编辑",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
}
</style>
